<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>helloWorld</title>
</head>

<body>
  <div id="app">
    <input type="text" v-model="message">
    <p>hello {{ message }}</p>
  </div>

  <script type="text/javascript" src="./js/vue.js"></script>
  <script type="text/javascript">
    /*
     *  1. 引入vue.js
     *  2. 创建Vue对象
     *        - el: 指定根元素（选择器）
     *        - data: 初始化数据
     *  
     *  
     *  MVVM的理解:
     *  M: model模型，数据对象（data）
     *  V: view视图，模板页面 （el）
     *  VM: viewModel视图模型，vue实例
     *      - DOM Listeners
     *      - Data Bindings
     * 
     */

    const vm = new Vue({
      el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
      data: {
        message: 'vue'
      }
    })

    vm.message = "amour";
  </script>
</body>

</html>